<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="utf-8">
	  	<title>门店</title>
	  	<style type="text/css">
	  	.dataTables_wrapper .row{
	  		display:none;
	  	}
	  	</style>
	</head>
	<body>
		<!-- .modal 选择门店-->
		<div id="shopModal" class="modal fade" data-backdrop="static" data-keyboard="false" style="z-index: 9999;">

			<div class="modal-dialog pos-abt modal-lger select-store-dg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
								class="icon-remove"></i></button>
						<h4 class="modal-title">选择门店</h4>
					</div>
					<div class="modal-body">
					<div class="row">
					<div class="col-5 to-select">
					<form class="form-horizontal">
							<div class="row">
								<div class="form-group">
									<label class="col-lg-2 control-label">门店</label>
									<div class="col-lg-10">
										<input type="text" class="form-control input-small" placeholder="门店名称"  name="storeName">
									</div>
								</div>
							</div>
							<div class="row city">
								<div class="form-group">
									<label class="col-lg-2 control-label">地区</label>
									<div class="col-lg-4">
										<select class="form-control input-small"  name="province">
										</select>
									</div>
									<label class="col-lg-2 control-label">城市</label>
									<div class="col-lg-4">
										<select class="form-control input-small" name="city">
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="form-group">
									<div class="col-lg-8">
										<input type="text" class="form-control input-small" placeholder="商家名称" name="shopName">
									</div>
									<div class="col-lg-4">
										<button type="button" class="btn btn-primary btn-small col-lg-12 storeSearch">查询</button>
									</div>
								</div>
							</div>
						</form>
						<div class="row">
							<table class="table table-striped m-b-none" data-ride="datatables">
								<thead>
								<tr>
									<th class="col-lg-2" ><input type="checkbox"></th>
									<th class="col-lg-3">商家名称</th>
									<th class="col-lg-3" >门店名称</th>
									<th class="col-lg-4" >所属地区</th>
								</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
						<div class="row selectStore clearfix" >
						</div>
						</div>
						<div class="col-2">
						<div class="row" style="margin-top: 150px;">
							<div class="col-5" style="margin-left: 20px;">
							<button type="button" class="btn btn-primary" id="leftToRight">&gt;&gt;</button>
							<button type="button" class="btn btn-primary" id="rightToLeft"  style="margin-top: 10px;">&lt;&lt;</button>
							</div>
						</div>
						</div>
						<div class="col-5 has-selected">
						<form class="form-horizontal">
							<div class="row">
								<div class="form-group">
									<label class="col-lg-2 control-label">门店</label>
									<div class="col-lg-10">
										<input type="text" class="form-control input-small" placeholder="门店名称" name="storeName">
									</div>
								</div>
							</div>
							<div class="row city1">
								<div class="form-group">
									<label class="col-lg-2 control-label">地区</label>
									<div class="col-lg-4">
										<select class="form-control input-small" name="province">
										</select>
									</div>
									<label class="col-lg-2 control-label">城市</label>
									<div class="col-lg-4">
										<select class="form-control input-small" name="city">
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="form-group">
									<div class="col-lg-8">
										<input type="text" class="form-control input-small" placeholder="商家名称" name="shopName">
									</div>
									<div class="col-lg-4">
										<button type="button"  class="btn btn-primary btn-small col-lg-12 storeSearch">查询</button>
									</div>
								</div>
							</div>
						</form>
						<div class="row">
							<table class="table table-striped m-b-none" data-ride="datatables">
								<thead>
								<tr>
									<th ><input type="checkbox"></th>
									<th >商家名称</th>
									<th >门店名称</th>
									<th >所属地区</th>
								</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
						<div class="row selectStore clearfix" >
						</div>
						</div>
					</div>
					</div>
					<div class="modal-footer">
						<div class="row">
							<div class="col-lg-10">
								<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
							</div>
							<div class="col-lg-2">
								<button type="button" class="btn btn-primary" id="chooseShopEnter">确 认</button>
							</div>
						</div>
					</div>
				</div><!-- /.modal-content -->
			</div>
		</div>
		<!-- / .modal 选择门店-->
	<script>
	// 选择门店 全选
	$('#shopModal thead :checkbox').click(function () {
		$(this).parents(".dataTables_wrapper").find("tbody :checkbox").prop("checked", $(this).prop("checked"));
	});
	//选择门店确认
	$("#chooseShopEnter").click(function () {
		var choosedStore = $(".choosedStore").empty();
		var str = '<div class="row selectStore clearfix">';
		var selectedCount=0;
		for(var i in rightStores){
			var store=rightStores[i];
			if(null!=store){
				selectedCount++;
				str += '<span data-id="'+ store.storeId +'" data-storeName="'+store.storeName+'" data-shopId="'+ store.shopId+'" data-shopName='+store.shopName+' class="label bg-info">'+ store.storeName+'<i class="icon-remove"></i></span>';
			}
		}
		str += '</div>';
		$(".chooseShop").text("已选 " + selectedCount + " 家门店");
		$(".choosedStore").empty().append(str);
		$('#shopModal').modal('hide');
	});
	//>>　
	$("#leftToRight").click(function(){
		$('#shopModal .to-select tbody :checkbox:checked').each(function(){
			var _this=$(this);
			var store={shopId:_this.attr("data-shopid"),stopName:_this.attr("data-shopname"),storeId:_this.attr("data-id"),storeName:_this.attr("data-storename")}
			$("#shopModal .has-selected tbody .dataTables_empty").parent().remove();
			$("#shopModal .has-selected tbody").append($(this).parent().parent());
			var removeStore=removeExcludeLeft(store.storeId);
            addExcludeRight(removeStore);
		})
	});
	//<<
	$("#rightToLeft").click(function(){
		$('#shopModal .has-selected tbody :checkbox:checked').each(function(){
			var _this=$(this);
			var storeId = _this.attr("data-id");
			$("#shopModal .to-select tbody .dataTables_empty").parent().remove();
			$("#shopModal .to-select tbody").append($(this).parent().parent());
            var removeStore=removeExcludeRight(storeId);
            addExcludeLeft(removeStore);
		})
	});
	// 初始化地区
	$(".city").province_city();
	$(".city1").province_city();
	// 查询门店
	$(".to-select .storeSearch").click(function () {
        var storeName = $('.to-select [name=storeName]').val();
        var prov = $('.to-select [name=province]').val();
        var city = $('.to-select [name=city]').val();
        var merchantName = $('.to-select [name=shopName]').val();
        var stores=searchLeft(storeName,prov,city,merchantName,true)
        var datatable = $('#shopModal .to-select').find('[data-ride="datatables"]:last').dataTable().api();
        datatable.clear();
        datatable.rows.add(stores);
        datatable.draw();
	});
	// 查询门店
	$(".has-selected .storeSearch").click(function () {
        var storeName = $('.has-selected [name=storeName]').val();
        var prov = $('.has-selected [name=province]').val();
        var city = $('.has-selected [name=city]').val();
        var merchantName = $('.has-selected [name=shopName]').val();
        var stores=searchLeft(storeName,prov,city,merchantName,false)
        var datatable = $('#shopModal .has-selected').find('[data-ride="datatables"]:last').dataTable().api();
        datatable.clear();
        datatable.rows.add(stores);
        datatable.draw();
	});
	//门店初始化
    function bandLeft() {
        $('#shopModal .to-select').find('[data-ride="datatables"]:last').each(function () {
            $(this).dataTable({
                data: leftStores,
                "processing": true,
                //"serverSide":true,
                "autoWidth": true,
                "ordering": false,
                "paging": false,
                "scrollY": "200px",
                "dom": "t<'row'<'col col-lg-6'i><'col col-lg-6'p>>",
                "columns": [
                    {"data": null},
                    {"data": "shopName"},
                    {"data": "storeName", className: "storeName"},
                    {"data": "area"}
                ],
                "columnDefs": [
                    {
                        "targets": 0,
                        "data": null,
                        "render": function (data, type, full) {
                            return '<input type="checkbox" data-id="' + full['storeId'] + '" data-shopId="' + full['shopId'] + '" data-storeName="' + full['storeName'] + '" data-shopName="' + full['shopName'] + '">';
                        }
                    }
                ]
            });
        })
    }
    function initToSelectMendian() {
        if(leftStores){
            var stores=[];
            for(var i in leftStores){
                var store=leftStores[i];
                if(store!=null){
                    stores.push(store);
                }
            }
            leftStores=stores;
            bandLeft();
            return
        }
        $.get("activitysys/getSelectedStores","activityCurrentId="+$("#activityCurrentId").val(),function(json){
            leftStores=json.data;
            bandLeft();
        },'json');
	}
	//已选门店初始化
    function bandRight() {
        $('#shopModal .has-selected').find('[data-ride="datatables"]:last').each(function () {
            $(this).dataTable({
                data: rightStores,
                "processing": true,
                //"serverSide":true,
                "autoWidth": true,
                "ordering": false,
                "paging": false,
                "scrollY": "200px",
                "dom": "t<'row'<'col col-lg-6'i><'col col-lg-6'p>>",
                "columns": [
                    {"data": null},
                    {"data": "shopName"},
                    {"data": "storeName", className: "storeName"},
                    {"data": "area"}
                ],
                "columnDefs": [
                    {
                        "targets": 0,
                        "data": null,
                        "render": function (data, type, full) {
                            return '<input type="checkbox" data-id="' + full['storeId'] + '" data-shopId="' + full['shopId'] + '" data-storeName="' + full['storeName'] + '" data-shopName="' + full['shopName'] + '">';
                        }
                    }
                ]
            });
        });
    }
    function initSelectedMendian() {
        if(rightStores){
            var stores=[];
            for(var i in rightStores){
                var store=rightStores[i];
                if(store!=null){
                    stores.push(store);
                }
            }
            rightStores=stores;
            bandRight();
            return ;
        }
        $.get("activitysys/getSelectedStores","activityId="+$("#activityCurrentId").val(),function(json){
            rightStores=json.data;
            bandRight();
        },'json');
    }
		function addExcludeLeft(store){
            leftStores.push(store);
		}
		function removeExcludeLeft(storeId){
			for(var i in leftStores){
				var store=leftStores[i];
				if(null!=store&&store.storeId==storeId){
                    leftStores[i]=null;
					return store;
				}
			}
		}

		function addExcludeRight(store){
            rightStores.push(store);
		}
		function removeExcludeRight(storeId){
			for(var i in rightStores){
				var store=rightStores[i];
                if(null!=store&&store.storeId==storeId){
                    rightStores[i]=null;
                    return store;
                }
			}
		}
        function searchLeft(storeName,prov,city,merchantName,isLeft){
            var condition=[];
            var length=0;
            if(storeName){
                condition['storeName']=storeName;
                length++;
            }
            if(prov){
                condition['provId']=prov;
                length++;
            }
            if(city){
                condition['cityId']=city;
                length++;
            }
            if(merchantName){
                condition['shopName']=merchantName;
                length++;
            }
            var stores = isLeft?leftStores:rightStores;
            var ret=[];
            if(stores){
                for(var i in stores){
                    var store=stores[i];
                    if(null==store){
                        continue;
                    }
                    var flag=true;
                    for(var j in condition){
                        if(j=='storeName'||j=='shopName'){
                            flag=flag&&null!=store[j]&&store[j].indexOf(condition[j])!=-1
                        }else{
                            flag=flag&&store[j]==condition[j];
                        }
                    }
                    if(flag){
                        ret.push(store);
                    }
                }
            }
            return ret;
        }
	initToSelectMendian();
	initSelectedMendian();
	</script>
	</body>
</html>